<template>
  <el-container>
    <el-main>
      <el-row :gutter="0">
        <el-col :span="24">
          <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane name="1">
              <span slot="label"><i class="el-icon-date"></i> 基本资料</span>
              <stuInfo v-if="!role"></stuInfo>
              <teaInfo v-if="role"></teaInfo>
            </el-tab-pane>
            <el-tab-pane name="2">
              <span slot="label"><i class="el-icon-date"></i> 修改密码</span>
              <stu_teaUpdatePwd></stu_teaUpdatePwd>
            </el-tab-pane>

            <el-tab-pane label="修改头像" name="3" style="padding: 30px">
              <el-col :span="11">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :limit="1"
                  drag
                  :action="actionUrl"
                  name="teastu"
                  :headers="headers"
                  :on-success="uploadSuccess"
                  :before-upload="beforeUpload"
                  accept=".png,.jpg"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <div class="el-upload__tip">只能上传jpg/png文件</div>
                </el-upload>
              </el-col>

              <el-col :span="2">
                <span class="title">当前头像</span>
              </el-col>
              <el-col :span="10">
                <div class="demo-fit">
                  <div class="block">
                    <el-avatar shape="circle" :size="200" fit="fill " :src="image_url"></el-avatar>
                  </div>
                </div>
              </el-col>


            </el-tab-pane>

          </el-tabs>
        </el-col>
      </el-row>
    </el-main>
  </el-container>

</template>
<script>
  import stuInfo from "@/components/stuInfo"
  import teaInfo from "@/components/teaInfo"
  import stu_teaUpdatePwd from "@/components/stu_teaUpdatePwd"

  var token;
    if (localStorage.JWT_TOKEN) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
        token = `${localStorage.JWT_TOKEN}`;

    }
    export default {
        components: {stuInfo, stu_teaUpdatePwd, teaInfo},
        data() {
            return {
                actionUrl: "",
                role: false,
                image_url: "http://132.232.47.31:8080/image/w1.jpg",
                activeName: '1',
                headers: {Authorization: token},
                listType: [
                    'png',
                    'jpg',
                ],
            };
        },
        computed: {},
        methods: {
            uploadSuccess(response, file, fileList) {

                this.image_url = response.data
                var userinfo = this.UserInfo.getUserInfo()
                userinfo.faceIcon = response.data;
                this.UserInfo.setUserInfo(userinfo);
                this.$router.go(0)
            },
            beforeUpload(file) {
                console.log(file)
                var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                var extension1 = false;
                this.listType.forEach(re => {
                    if (testmsg == re)
                        extension1 = true;
                })
                if (!extension1) {
                    this.$message({
                        message: '上传文件类型只能上传jpg/png文件!',
                        type: 'warning'
                    });
                }
                return extension1;
            },

// 上传数据

        },
        mounted: function () {
            //mounted　表示这个 Vue 对象加载成功了
            //获取学院数据

          var self = this;

            var userinfo = this.UserInfo.getUserInfo();
            this.image_url = userinfo.faceIcon
            this.actionUrl = this.URL.api + "user/updateImg/" + this.$cookie.get("userid") + "/" + this.$cookie.get("role");
            var roles = this.$cookie.get("role");
          console.log(roles)

                if (roles >= 2000) {
                  self.role = true
                } else {
                  self.role = false;


            }


        }
    }
</script>

<style scoped>
  .el-main {
    padding: 0px;
  }

  .H_V_center {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin-left: 20px;
    /*background-color: red;*/
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
